<template>
	<view class="status_bar" :style="{background: hideBg ? 'transparent' : '#fff', color}">
		<view :style="{height: mainStore.statusBarHeight + 'px'}"></view>
		<view class="flexac p-re" :style="{height: mainStore.navBarHeight + 'px'}">
			<view class="icon p-ab" v-if="!tabBar">
				<text class="iconfont icon-shouye size40 p-left10" @click="toRect('/pages/index/index')" v-if="fromShare == 1"></text>
				<text class="iconfont icon-xiangzuo size40" @click="Back()" v-else></text>
			</view>
			<view class="size34 ellipsis_1 text-center" :style="{width: titleWidth + 'px'}">{{ title || mainStore.userInfo.enterpriseName }}</view>
		</view>
	</view>
	<!-- 等高元素防止塌陷 -->
	<view :style="{height: totalHeight + 'px'}" v-if="placeholder"></view>
</template>

<script setup>
	import { computed } from 'vue'
	import { Back, toRect } from '@/utils/utils.js'
	import { useMainStore } from '@/stores/index'
	const mainStore = useMainStore()
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		tabBar: {
			type: Boolean,
			default: false
		},
		placeholder: {
			type: Boolean,
			default: true
		},
		hideBg: {
			type: Boolean,
			default: false
		},
		color: {
			type: String,
			default: '#222'
		},
		fromShare: {
			type: Number,
			default: 0
		}
	})
	const titleWidth = computed(() => {
		return mainStore.navWidth - mainStore.capsuleWidth
	})
	const totalHeight = computed(() => {
		return mainStore.statusBarHeight + mainStore.navBarHeight
	})
</script>

<style lang="scss" scoped>
	.status_bar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 11;
	}
	.icon {
		padding: 0 20rpx;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
</style>
